<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* 
  .box {
    height: 200px; //第一种去除浮动就是手动给父盒子加上高度
  } */

    /* .fix::after {
    content: '';
    display: block;// 第三种 在后面加个伪元素就可以清除浮动了，而且也没有冗杂的元素
    clear: both;
  } */
    /* .box {
    overflow: hidden;   第四种   在父盒子加上 overflow: hidden
  } */

    .first {
        width: 200px;
        height: 200px;
        background-color: aquamarine;
        float: left;
    }

    .second {
        width: 200px;
        height: 200px;
        background-color: blueviolet;
        float: left;
    }

    .third {
        width: 200px;
        height: 200px;
        background-color: burlywood;
        float: left;
    }
</style>

<body>
    <div class="box fix">
        <div class="first"></div>
        <div class="second"></div>
        <div class="third"></div>
        <!-- <div style="clear: both;"></div>  第二种去除浮动就是在最后加一个div，但是太多余了，冗杂元素，没必要的div   clear:both，图像的左右侧均不允许出现浮动-->
    </div>
</body>

</html>